<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    验证码登录(手机号如果未注册 注册+登录; 已注册 直接登录): 
      1. 收集手机号 校验
      2. 点击发送短信时 调用后端接口
      3. 短信发出后 显示倒计时 => 文字和倒计时组件(插槽+bindchange)的互斥显示
      4. 输入验证码 校验
      5. 完成登录(调用接口 存token 跳转页面)


    auth组件 => 模拟vue中前置守卫 完成登录访问控制
      1. 如果希望在每一个页面访问之前 验证用户是否登录 => 临时方案 => 就是在每一个页面的onLoad种手动判断
      2. 换一种思路 => 我给每一个页面结构包裹一个auth组件 => 通过组件进行登录判断
        2.1 组件内部给个插槽 页面就能正常显示; 如果不给插槽 那么就不显示
        2.2 基于全局的token 控制一个布尔值 从而控制插槽的有无 
        2.3 在没有登录时 还得控制页面跳转到登录(鞋带回跳地址)

    token过期如何处理的?
      1. 常规处理: 响应拦截器中发现状态码是401 清除失效token+跳转登录页
      2. 刷新token+无感请求: 
        2.1 后端在登录完成后 会返回两个token(其中一个是用于刷新token的refreshToken)  --- 大前提
        2.2 需要在登录完成后 存储两个token(一个token用于配置请求头 一个refreshToken用于处理失效token)
        2.3 将来在响应拦截器中发现状态码是401 利用存储的refreshToken请求后端接口 获取一个新的有效的token 存储下来(401 200)
        2.4 在token更新后 利用之前那次错误请求的**配置对象** 重新发送原来的请求(401 200 200)
        2.5 refreshToken也会过期 刷新token的请求也会出现401 我们需要利用请求url判断当次请求是否是刷新token
             如果是 直接去登录
   -->
  </body>
</html>
